<template>
  <div class="course">
    <h3 class="title">课程管理</h3>
    <div class="toolbar">
      <el-button type="danger" icon="el-icon-plus" size="small" @click="$router.push('add')">添加</el-button>
      <el-form size="small" inline>
        <el-form-item>
          <el-input placeholder="课程名称" v-model="searchForm.title" />
        </el-form-item>
        <el-form-item>
          <el-select v-model="searchForm.teacher_id" placeholder="请选择">
            <el-option
              v-for="teacher in teacherList"
              :key="teacher.id"
              :value="teacher.id"
              :label="teacher.name"
            />
            <el-option value label="全部" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button size="small" icon="el-icon-search" type="primary" @click="onSearch">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <xu-table :data="tableData" :options="tableOptions" :pager="pager" :loading="loading">
      <template slot="title" slot-scope="{ row }">
        <el-tooltip :content="row.title">
          <span>{{ row.title }}</span>
        </el-tooltip>
      </template>
      <template slot="thumb" slot-scope="{ row }">
        <el-image style="border-radius: 3px" :src="row.thumb" />
      </template>
      <template slot="teacher_id" slot-scope="{ row }">{{ getTeacherName(row.teacher_id) }}</template>
      <template slot="expire" slot-scope="{ row }">
        <el-tag type="success">{{ courseExpire(row.expire) }}</el-tag>
      </template>
    </xu-table>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import table from '../../../mixins/table'
import { CourseActionsEnum } from '../../../_/vue/store/course'
import { TeacherActionsEnum } from '../../../_/vue/store/teacher'
export default {
  mixins: [table],
  data () {
    return {
      teacherList: [],
      searchForm: {
        title: '',
        teacher_id: ''
      },
      tableOptions: [
        { attrs: { label: '课程名称', prop: 'title' } },
        { attrs: { label: '封面', prop: 'thumb' } },
        { attrs: { label: '价格', prop: 'price' } },
        { attrs: { label: '讲师', prop: 'teacher_id' } },
        { attrs: { label: '浏览量', prop: 'views' } },
        { attrs: { label: '购买人数', prop: 'buyer_count' } },
        { attrs: { label: '课程有效期', prop: 'expire' } },
        {
          attrs: { label: '操作', prop: 'opt', width: '140px', align: 'center' },
          buttons: [
            {
              label: '编辑',
              icon: 'el-icon-edit',
              type: 'primary',
              click: ({ row }) => this.$router.push({ path: 'add', query: { id: row.id } })
            },
            {
              label: '删除',
              icon: 'el-icon-delete',
              type: 'popover',
              click: ({ row }) => {
                this.delete({ ids: [row.id] })
                this.getData()
              }
            }
          ]
        }
      ]
    }
  },
  async mounted () {
    const teachers = await this.teachers()
    this.teacherList = teachers.data
  },
  methods: {
    ...mapActions({
      list: CourseActionsEnum.LIST,
      delete: CourseActionsEnum.DELETE,
      teachers: TeacherActionsEnum.SELECT
    }),
    getTeacherName (teacherId) {
      let teacherName
      this.teacherList.forEach((teacher) => {
        if (teacher.id === teacherId) {
          teacherName = teacher.name
          return false
        }
      })
      return teacherName
    }
  }
}
</script>
